<script setup>
  import useCartStore from "@/stores/cart.js";

  // data
  const cartStore = useCartStore()
  const props = defineProps(['product','shopName','min'])
  // const { product, shopName, min } = toRefs(props)
  // const isShow = ref(false)
  // console.log(product)

  // methods
  const delProduct = product =>{
    // console.log(1111)
    if(product.number > 0 ){
      // console.log(product)
      product.number --
      // console.log(product.number)
      // isShow.value = product.number > 0;
      // console.log(product.number)
      // console.log(product.number)
    }
    const res = cartStore.cartList.find(item => item.name === props.shopName)
    // console.log('aa',res)
    if(!res) return
    if(product.number === 0){
      // console.log(1234)
      res.list = res.list.filter(item => item !== product)
      // let res1 = res.list.find(item => {
      //   console.log('这里是')
      //   console.log(typeof item.id,item.id)
      //   console.log(typeof product1.id,product1.id)
      //   item.id === product1.id
      // })
      // console.log('aaaa',res)
    }
    // if(product.number <= 1){
    //   let res = cartStore.cartList.list.find(item => item.id === product.id)
    //   console.log(321)
    //   if(res){
    //     res = res.filter(item => item !== product)
    //     console.log(1234,res)
    //   }
    // }else {
    //   product.number --
    //   isShow.value = product.number > 0;
    // }

  }
  const addProduct = product =>{
    // console.log(product)
    product.number ++
    // isShow.value = product.number > 0;
    // console.log(product.number)
    const res = cartStore.cartList.find(item => item.name === props.shopName)
    // console.log('@@@@',res)
    // 判断该店名的购物车是否存在，不存在则创建
    if(!res){
      const cart = { name:'',list:[]}
      cart.name = props.shopName
      cart.list.push(product)
      cartStore.cartList.push(cart)
      // console.log(cartStore.cartList)
    }else {
      // 如果存在，查找该商品是否存在，存在叠加，不存在新增
      const res2 = res.list.find(item => item === product)
      if(!res2){
        res.list.push(product)
      }
      // console.log('bbb',cartStore.cartList)
    }
  }
</script>

<template>
  <div class="product">
    <div :class="[min ? 'product_img--min' : 'product_img']">  <!-- <div class="product_img--min"> -->
      <img :src="`http://www.dell-lee.com/imgs/vue3/${product.imgName}.png`" alt="">
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ product.title }}</div>
      <!-- <div class="product_content_sales">月售 {{ props.product.sales }} 件</div> -->
      <slot></slot>
      <div class="product_content_price">￥{{ product.price }} <span class="product_content_old_price">￥{{ product.oldPrice }}</span></div>

    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="delProduct(product)">-</span>
      {{ product.number }}
      <span class="product_number_plus" @click="addProduct(product)">+</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.product {
  padding: .18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: .01rem solid $content-bgColor;

  &_img {
    width: .68rem;
    margin-right: .18rem;

    img {
      width: .68rem;
      height: .68rem;
    }
  }
  &_img--min {
    width: .48rem;
    margin-right: .18rem;

    img {
      width: .48rem;
      height: .48rem;
    }
  }
  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: .14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }
    &_price {
      color: $hightlight-fontColor;
    }
    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }
  &_number {
    position: absolute;
    right: .18rem;
    bottom: .18rem;

    &_minus,&_plus {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      border-radius: 50%;
      font-size: .16rem;
      text-align: center;
    }
    &_minus {
      border: .01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: .08rem;
    }
    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: .08rem;
    }
  }
}
</style>